<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useCounterStore } from "@store/counterStore";
import Language from "./Language.vue";
import langMap from "@/locales/LangMap";
import { loginApi } from "@api/auth";
import electronUtils from "@/utils/electronUtils";


defineProps<{ msg: string }>();


const counterStore = useCounterStore();

const router = useRouter();
function goBack() {
  router.back();
}
const count = ref(0);

function login() {
  loginApi({ username: "sysadmin", password: "sysadmin" }).then((res) => {
    console.log(res);
  });
}

console.log("dev独有的环境变量：" + import.meta.env.VITE_DEV_PARAM);
// #region 进度条的显示隐藏
const showProcess = ref(false);
/**切换process 显示/隐藏 */
function switchProcess() {
  showProcess.value = !showProcess.value;
  electronUtils.showProcess(showProcess.value);
}
// #endregion


</script>

<template>
   <ul>
    <li>
       <el-button type="warning" @click="switchProcess">{{
        showProcess ? "关闭process" : "显示process"
      }}</el-button>
    </li>
  </ul>
   <SvgIcon
    name="renwen"
    :size="60"
    style="color: pink"
  ></SvgIcon>
  <li>
    <el-button type="primary" @click="login">登录请求</el-button>
  </li>
  <h1>{{ $t(langMap.app_title) }}</h1>
  <h1>{{ $t("app.title") }}</h1>
  <h1>
    当前的计数为：{{ counterStore.counter }} 双倍值为：{{
      counterStore.doubleCounter
    }}
  </h1>
  <li>
    <el-button type="warning" @click="counterStore.counter++"
      >直接操作state去改变值</el-button
    >
  </li>
  <li>
    <el-button type="info" @click="counterStore.increment">increment</el-button>
  </li>
  <li>
    <Language />
  </li>
  <h1>{{ msg }}</h1>
  <el-icon size="25" color="red">
    <i-ep-edit />
  </el-icon>

  <el-button type="success" @click="goBack">返回上一页</el-button>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Install
    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
